<template>
  <div>
        <el-popover placement="bottom-start" width="1000" style="margin-right:10px;" trigger="click">
          <el-form :inline="true" :model="search">
              <el-form-item label="开始时间" >
                      <el-date-picker
                        v-model="search.startOutTime"
                        type="date"
                        placeholder="选择日期"
                        style="margin-top:-5px;"
                        >
                        </el-date-picker>
              </el-form-item> 
              <el-form-item label="结束时间" >
                       <el-date-picker
                        v-model="search.endOutTime"
                        type="date"
                        placeholder="选择日期"
                        style="margin-top:-5px;"
                        >
                        </el-date-picker>
              </el-form-item> 
              <el-form-item label="出库编号" >
                  <el-input v-model="search.outCode" clearable></el-input>
              </el-form-item> 
<!-- 
              <el-form-item label="是否是毛坯外协" >
                  <el-select v-model="search.isMp" clearable>
                      <el-option label="否" value="0"></el-option>
                      <el-option label="是" value="1"></el-option>
                  </el-select>
              </el-form-item> -->
                <br>         
              <el-button type="primary" style="float:right; margin-left:5px;"  @click="restSearchBtn">重置</el-button>
              <el-button type="primary" style="float:right;"  @click="searchBtn">确认</el-button>
          </el-form>
          <el-button slot="reference" type="primary" icon="el-icon-search">查询</el-button>
        </el-popover>
            <el-table :data="tableList" stripe border class="user-table"   @selection-change="handleSelectionChange"   style="width: 100%;">
                <el-table-column prop="outTime" label="出库日期" sortable min-width="100">
                    <template slot-scope="scope">
                        {{timestampToTime(scope.row.outTime,'yyyy-mm-dd hh:mm:ss')}}
                    </template>
                </el-table-column>
                <el-table-column prop="creatorName" label="出库人" sortable min-width="80"></el-table-column>
                <el-table-column prop="outCode" label="出库编号" sortable min-width="80"></el-table-column>
                <el-table-column prop="outNum" label="出库数量" sortable min-width="80"></el-table-column>
                 <el-table-column prop="isOutOver" label="是否出完" sortable min-width="100">
                    <template slot-scope="scope">
                        <span v-if="scope.row.isOutOver ===1" class='el-icon-circle-check  cl-success fn-size18 '></span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                    <el-button type="text" @click="showDialog(scope.row)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>   
            <el-pagination  @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5,10, 15,20, 25,30,50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>


            <el-dialog class="bodyNopaddingTop" :title="dialog.title" :visible.sync="dialog.isShow"  v-dialogDrag  width="100%">
                    <el-table :data="detailTableList" stripe border class="user-table"  style="width: 100%;" >
                        <el-table-column fixed type="index" label="序号" sortable min-width="30"></el-table-column>
                        <el-table-column prop="taskNo" label="任务单号" sortable width="100"></el-table-column>
                        <el-table-column prop="code29" label="29所编码" sortable width="100"></el-table-column>
                        <el-table-column prop="taskSerialNo" label="任务流水号" sortable width="100"></el-table-column>
                        <el-table-column prop="customerName.name" label="客户" sortable width="100" > </el-table-column>
                        <el-table-column prop="planAttribute" label="计划属性" sortable width="100"></el-table-column>
                        <el-table-column prop="priority" label="优先级" sortable min-width="100" > </el-table-column>
                        <!-- <el-table-column prop="issueDate" label="计划下发时间" sortable width="100" :formatter="timeFormatter" ></el-table-column> -->
                        <el-table-column prop="wbPlanFinsihDate" label="外包计划完成时间" sortable width="100" :formatter="timeFormatter"></el-table-column>
                        <el-table-column prop="nums" label="件数" sortable width="60"></el-table-column>
                        <el-table-column prop="makeNo" label="生产令号" sortable min-width="200"></el-table-column>
                        <el-table-column prop="drawNo" label="图纸序号" sortable min-width="50"></el-table-column>
                        <el-table-column prop="drawName" label="图纸名称" sortable min-width="120"></el-table-column>
                        <el-table-column prop="drawNums" label="项目图纸张数"  width="50"  align="center"></el-table-column>
                        <el-table-column prop="drawCode" label="图纸编号" sortable min-width="120"></el-table-column>
                        <el-table-column prop="isUploadDraw" label="上传资料" width="40"  align="center">
                            <template slot-scope="scope">
                            <span v-if="scope.row.isUploadDraw ===1" class='el-icon-circle-check  cl-success fn-size18 '></span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="isFinishProcess" label="工艺编制" width="40"  align="center">
                            <template slot-scope="scope">
                            <span v-if="scope.row.isFinishProcess ===1" class='el-icon-circle-check  cl-success fn-size18 '></span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="isMaterialArrvie" label="是否到料" width="40"  align="center">
                            <template slot-scope="scope">
                            <span v-if="scope.row.isMaterialArrvie ===1" class='el-icon-circle-check  cl-success fn-size18 '></span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="isMaterialTailor" label="是否下料" width="40"  align="center">
                            <template slot-scope="scope">
                            <span v-if="scope.row.isMaterialTailor ===1" class='el-icon-circle-check  cl-success fn-size18 '></span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="isFinishProgram" label="编程" width="40"  align="center">
                            <template slot-scope="scope">
                            <span v-if="scope.row.isFinishProgram ===1" class='el-icon-circle-check  cl-success fn-size18 '></span>
                            </template>
                        </el-table-column>
                        <!-- <el-table-column prop="insertOrder" label="计划是否下达" width="40"  align="center">
                        <template slot-scope="scope">
                            <span v-if="scope.row.insertOrder ===1" class='el-icon-circle-check  cl-success fn-size18 '></span>
                        </template>
                        </el-table-column>
                        <el-table-column prop="insertOrder" label="刀具是否齐备" width="40"  align="center">
                        <template slot-scope="scope">
                            <span v-if="scope.row.insertOrder ===1" class='el-icon-circle-check  cl-success fn-size18 '></span>
                        </template>
                        </el-table-column>
                        <el-table-column prop="insertOrder" label="是否首检" width="40"  align="center">
                        <template slot-scope="scope">
                            <span v-if="scope.row.insertOrder ===1" class='el-icon-circle-check  cl-success fn-size18 '></span>
                        </template>
                        </el-table-column>
                        <el-table-column prop="insertOrder" label="是否检验" width="40"  align="center">
                        <template slot-scope="scope">
                            <span v-if="scope.row.insertOrder ===1" class='el-icon-circle-check  cl-success fn-size18 '></span>
                        </template>
                        </el-table-column>
                        <el-table-column prop="insertOrder" label="是否出货" width="40"  align="center">
                        <template slot-scope="scope">
                            <span v-if="scope.row.insertOrder ===1" class='el-icon-circle-check  cl-success fn-size18 '></span>
                        </template>
                        </el-table-column>
                        <el-table-column prop="insertOrder" label="是否结账" width="40"  align="center">
                        <template slot-scope="scope">
                            <span v-if="scope.row.insertOrder ===1" class='el-icon-circle-check  cl-success fn-size18 '></span>
                        </template>
                        </el-table-column> -->
                        <el-table-column prop="currentState" label="任务状态" sortable width="120"></el-table-column>
                        <el-table-column prop="importerName" label="导入人" sortable width="100"></el-table-column>
                        <el-table-column prop="importDate" label="导入时间" sortable min-width="100" :formatter="timeFormatter"></el-table-column>
                    </el-table>
            </el-dialog>
  </div>
</template>
<script>
import planApi from 'plugins/axios/planApi.js';
export default {
    data(){
        return{
            search:{
               startOutTime:'', 
               endOutTime:'', 
               outCode:'', 
            },
            ids:'',
            multipleSelection:[],
            currentRow:{},
            tableList:[],
            detailTableList:[],
            currentPage:1,
            pageSize:10,
            total:0,
            dialog:{/**弹框配置 */
                title:'',
                isShow:false,
                type:'',
                formData:{},
                activeName:'2',
                otherUpDataData:{},
                tableData:[],
                drawCode:''
            },
            activeName:'0',
        }
    },
    created(){
        this.$nextTick(()=>{
            this.queryTableList();
        });
    },
    methods:{
        timeFormatter(row, column, cellValue, index){
            return cellValue?this.timestampToTime(cellValue,'yyyy-mm-dd'):'';
        },
        tabClick(){
            let self = this;
            self.queryTableList();
        },
        handleSizeChange(){
            let self = this;
        },
        handleCurrentChange(){
            let self = this;
        },
        searchBtn(){
            let self = this;
            self.queryTableList();
        },
        restSearchBtn(){
            let self = this;
            self.search={
               startOutTime:'', 
               endOutTime:'', 
               outCode:'', 
            }
            self.queryTableList();
        },
        queryTableList(){
            let self = this;
            let param = {
               currentPage:self.currentPage, 
               pageSize:self.pageSize, 
               startOutTime:self.search.startOutTime, 
               endOutTime:self.search.endOutTime, 
               outCode:self.search.outCode, 
            };
            planApi.selectOut(param).then(res=>{
                self.tableList = res.content.records;
                self.total = res.content.total;
            });
        },
        showDialog(row){
            let self = this;
            self.currentRow = row;
           self.detailTableList =  self.currentRow.totalList;
            self.dialog.isShow = true;
        },
        editUnqualified(){
            let self = this;
            let param = {
                id:self.currentRow.id,
                remark:self.currentRow.remark,
                targetType:self.currentRow.targetType,
            }
            planApi.editUnqualified(param).then(res=>{
                self.$message({message:'处理成功',type:'success'});
                self.queryTableList();
            });
        },
        cpkOut(){
            let self = this;
            if(self.ids!=''){
                planApi.cpkOut({totalIds:self.ids}).then(res=>{
                  self.$message({message:'出库成功！',type:'success'});
                  self.queryTableList();

                });
            }else{
                self.$message({message:'请选择出库数据',type:'success'});
            }
        },
        cpkOutSingle(){
            let self = this;
                planApi.cpkOutSingle(self.currentRow.id,self.currentRow.num).then(res=>{
                  self.$message({message:'出库成功！',type:'success'});
                  self.dialog.isShow = false;
                  self.queryTableList();
                });
        
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
            if(val!=null && val.length!=0){
                let idArray = [];
                val.forEach(element => {
                    idArray.push(element.id);
                });
                this.ids =  idArray.join(',');
            }else{
                this.ids='';
            }
        }

    }
}
</script>